<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的反馈</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-orange-600 to-red-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-feedback.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">我的反馈</h1>
                <button onclick="filterFeedbacks()" class="text-white hover:opacity-80">
                    <i class="fas fa-filter text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Feedback Summary Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-orange-600 to-red-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="text-white">
                    <p class="text-sm opacity-80 mb-1">反馈统计</p>
                    <p class="text-2xl font-bold mb-3">总计 12条</p>
                    <div class="grid grid-cols-4 gap-3">
                        <div class="text-center">
                            <p class="text-xs opacity-80">已解决</p>
                            <p class="text-lg font-semibold">7</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">处理中</p>
                            <p class="text-lg font-semibold">3</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">待处理</p>
                            <p class="text-lg font-semibold">2</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">平均响应</p>
                            <p class="text-lg font-semibold">2h</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Tabs -->
        <div class="px-4 pt-3">
            <div class="flex space-x-2 overflow-x-auto">
                <button onclick="filterByStatus('all')" class="filter-tab active bg-orange-600 text-white text-xs px-3 py-2 rounded-full whitespace-nowrap">
                    全部 (12)
                </button>
                <button onclick="filterByStatus('pending')" class="filter-tab bg-gray-200 text-gray-600 text-xs px-3 py-2 rounded-full whitespace-nowrap">
                    待处理 (2)
                </button>
                <button onclick="filterByStatus('processing')" class="filter-tab bg-gray-200 text-gray-600 text-xs px-3 py-2 rounded-full whitespace-nowrap">
                    处理中 (3)
                </button>
                <button onclick="filterByStatus('resolved')" class="filter-tab bg-gray-200 text-gray-600 text-xs px-3 py-2 rounded-full whitespace-nowrap">
                    已解决 (7)
                </button>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-280px)] overflow-y-auto pb-32">
            <!-- Feedback List -->
            <div class="p-4">
                <div class="space-y-3">
                    <!-- Feedback Item 1 - Resolved -->
                    <div class="feedback-item bg-white rounded-xl border border-gray-200 overflow-hidden" data-status="resolved">
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full mr-2">功能建议</span>
                                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已解决</span>
                                    </div>
                                    <h3 class="text-sm font-medium mb-1">商品上架流程优化建议</h3>
                                    <p class="text-xs text-gray-500 mb-2">希望能简化商品发布流程，减少必填项，提供批量上传功能...</p>
                                    <div class="flex items-center text-xs text-gray-400">
                                        <i class="fas fa-clock mr-1"></i>
                                        <span>2025-01-08 14:32</span>
                                        <span class="mx-2">•</span>
                                        <i class="fas fa-arrow-up mr-1"></i>
                                        <span>高优先级</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Progress Timeline -->
                            <div class="bg-gray-50 rounded-lg p-3 mb-3">
                                <p class="text-xs font-medium text-gray-700 mb-2">处理进度：</p>
                                <div class="space-y-2">
                                    <div class="flex items-center text-xs">
                                        <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                                        <span class="text-gray-600">2025-01-10 16:20</span>
                                        <span class="mx-2 text-gray-400">•</span>
                                        <span class="text-green-600 font-medium">已解决并上线</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                                        <span class="text-gray-600">2025-01-09 11:15</span>
                                        <span class="mx-2 text-gray-400">•</span>
                                        <span class="text-gray-600">开发完成，进入测试</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
                                        <span class="text-gray-600">2025-01-08 15:00</span>
                                        <span class="mx-2 text-gray-400">•</span>
                                        <span class="text-gray-600">产品团队已接收并开始处理</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Response -->
                            <div class="bg-blue-50 rounded-lg p-3 mb-3">
                                <div class="flex items-start">
                                    <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2 mt-1">
                                        <i class="fas fa-user text-blue-600 text-xs"></i>
                                    </div>
                                    <div class="flex-1">
                                        <p class="text-xs font-medium text-blue-800 mb-1">产品团队回复：</p>
                                        <p class="text-xs text-blue-700">感谢您的宝贵建议！我们已经根据您的反馈优化了商品上架流程，新增了批量上传功能，简化了必填项。新版本已经上线，欢迎体验！</p>
                                        <p class="text-xs text-blue-600 mt-1">2025-01-10 16:20</p>
                                    </div>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="viewFeedbackDetail('FB001')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    查看详情
                                </button>
                                <button onclick="rateFeedback('FB001')" class="bg-green-50 text-green-600 text-xs px-3 py-2 rounded-lg hover:bg-green-100 transition-colors">
                                    评价
                                </button>
                                <button onclick="deleteFeedback('FB001')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    删除
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Feedback Item 2 - Processing -->
                    <div class="feedback-item bg-white rounded-xl border border-gray-200 overflow-hidden" data-status="processing">
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full mr-2">Bug报告</span>
                                        <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">处理中</span>
                                    </div>
                                    <h3 class="text-sm font-medium mb-1">数据报表导出问题</h3>
                                    <p class="text-xs text-gray-500 mb-2">导出Excel时部分数据显示异常，金额字段出现乱码...</p>
                                    <div class="flex items-center text-xs text-gray-400">
                                        <i class="fas fa-clock mr-1"></i>
                                        <span>2025-01-05 09:15</span>
                                        <span class="mx-2">•</span>
                                        <i class="fas fa-arrow-up mr-1"></i>
                                        <span>高优先级</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Progress Timeline -->
                            <div class="bg-gray-50 rounded-lg p-3 mb-3">
                                <p class="text-xs font-medium text-gray-700 mb-2">处理进度：</p>
                                <div class="space-y-2">
                                    <div class="flex items-center text-xs">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></div>
                                        <span class="text-gray-600">2025-01-08 10:30</span>
                                        <span class="mx-2 text-gray-400">•</span>
                                        <span class="text-blue-600 font-medium">技术团队正在修复中</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
                                        <span class="text-gray-600">2025-01-05 14:20</span>
                                        <span class="mx-2 text-gray-400">•</span>
                                        <span class="text-gray-600">问题已复现，技术团队介入</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <div class="w-2 h-2 bg-gray-400 rounded-full mr-2"></div>
                                        <span class="text-gray-600">2025-01-05 09:30</span>
                                        <span class="mx-2 text-gray-400">•</span>
                                        <span class="text-gray-600">客服团队已接收</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Response -->
                            <div class="bg-blue-50 rounded-lg p-3 mb-3">
                                <div class="flex items-start">
                                    <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2 mt-1">
                                        <i class="fas fa-wrench text-blue-600 text-xs"></i>
                                    </div>
                                    <div class="flex-1">
                                        <p class="text-xs font-medium text-blue-800 mb-1">技术团队回复：</p>
                                        <p class="text-xs text-blue-700">我们已经定位到问题原因，是数据编码格式导致的。预计今天下午修复完成，会第一时间通知您测试。</p>
                                        <p class="text-xs text-blue-600 mt-1">2025-01-08 10:30</p>
                                    </div>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="viewFeedbackDetail('FB002')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    查看详情
                                </button>
                                <button onclick="urgeFeedback('FB002')" class="bg-orange-50 text-orange-600 text-xs px-3 py-2 rounded-lg hover:bg-orange-100 transition-colors">
                                    催办
                                </button>
                                <button onclick="deleteFeedback('FB002')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    删除
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Feedback Item 3 - Pending -->
                    <div class="feedback-item bg-white rounded-xl border border-gray-200 overflow-hidden" data-status="pending">
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full mr-2">使用体验</span>
                                        <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full">待处理</span>
                                    </div>
                                    <h3 class="text-sm font-medium mb-1">移动端体验优化</h3>
                                    <p class="text-xs text-gray-500 mb-2">手机端操作不够流畅，建议优化页面加载速度和交互体验...</p>
                                    <div class="flex items-center text-xs text-gray-400">
                                        <i class="fas fa-clock mr-1"></i>
                                        <span>2025-01-03 16:45</span>
                                        <span class="mx-2">•</span>
                                        <i class="fas fa-minus mr-1"></i>
                                        <span>中优先级</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Pending status -->
                            <div class="bg-yellow-50 rounded-lg p-3 mb-3">
                                <div class="flex items-center">
                                    <i class="fas fa-clock text-yellow-600 mr-2"></i>
                                    <div>
                                        <p class="text-xs font-medium text-yellow-800">等待产品团队处理</p>
                                        <p class="text-xs text-yellow-700 mt-1">预计 1-2 个工作日内会有专人跟进</p>
                                    </div>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="viewFeedbackDetail('FB003')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    查看详情
                                </button>
                                <button onclick="editFeedback('FB003')" class="bg-orange-50 text-orange-600 text-xs px-3 py-2 rounded-lg hover:bg-orange-100 transition-colors">
                                    补充
                                </button>
                                <button onclick="deleteFeedback('FB003')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    删除
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Feedback Item 4 - Resolved with low rating -->
                    <div class="feedback-item bg-white rounded-xl border border-gray-200 overflow-hidden" data-status="resolved">
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full mr-2">其他建议</span>
                                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已解决</span>
                                    </div>
                                    <h3 class="text-sm font-medium mb-1">客服响应时间改进</h3>
                                    <p class="text-xs text-gray-500 mb-2">希望客服能够更快响应，目前等待时间较长...</p>
                                    <div class="flex items-center text-xs text-gray-400">
                                        <i class="fas fa-clock mr-1"></i>
                                        <span>2024-12-28 10:20</span>
                                        <span class="mx-2">•</span>
                                        <i class="fas fa-arrow-down mr-1"></i>
                                        <span>低优先级</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Response -->
                            <div class="bg-blue-50 rounded-lg p-3 mb-3">
                                <div class="flex items-start">
                                    <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2 mt-1">
                                        <i class="fas fa-user text-blue-600 text-xs"></i>
                                    </div>
                                    <div class="flex-1">
                                        <p class="text-xs font-medium text-blue-800 mb-1">客服团队回复：</p>
                                        <p class="text-xs text-blue-700">感谢您的反馈！我们已经增加了客服人员，优化了工作流程，目前平均响应时间已缩短到2小时内。</p>
                                        <p class="text-xs text-blue-600 mt-1">2024-12-30 14:15</p>
                                    </div>
                                </div>
                            </div>

                            <!-- User Rating -->
                            <div class="bg-green-50 rounded-lg p-3 mb-3">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-xs font-medium text-green-800 mb-1">您的评价：</p>
                                        <div class="flex items-center">
                                            <div class="flex text-yellow-400 mr-2">
                                                <i class="fas fa-star text-xs"></i>
                                                <i class="fas fa-star text-xs"></i>
                                                <i class="fas fa-star text-xs"></i>
                                                <i class="fas fa-star text-xs"></i>
                                                <i class="far fa-star text-xs"></i>
                                            </div>
                                            <span class="text-xs text-green-700">满意</span>
                                        </div>
                                    </div>
                                    <span class="text-xs text-green-600">已评价</span>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="viewFeedbackDetail('FB004')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    查看详情
                                </button>
                                <button onclick="deleteFeedback('FB004')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    删除
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Feedback Item 5 - Recent Resolved -->
                    <div class="feedback-item bg-white rounded-xl border border-gray-200 overflow-hidden" data-status="resolved">
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full mr-2">Bug报告</span>
                                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已解决</span>
                                    </div>
                                    <h3 class="text-sm font-medium mb-1">订单状态同步延迟</h3>
                                    <p class="text-xs text-gray-500 mb-2">支付完成后订单状态更新缓慢，影响发货效率...</p>
                                    <div class="flex items-center text-xs text-gray-400">
                                        <i class="fas fa-clock mr-1"></i>
                                        <span>2024-12-25 11:30</span>
                                        <span class="mx-2">•</span>
                                        <i class="fas fa-arrow-up mr-1"></i>
                                        <span>高优先级</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Quick resolved indicator -->
                            <div class="bg-green-50 rounded-lg p-3 mb-3">
                                <div class="flex items-center">
                                    <i class="fas fa-check-circle text-green-600 mr-2"></i>
                                    <div>
                                        <p class="text-xs font-medium text-green-800">问题已快速解决</p>
                                        <p class="text-xs text-green-700 mt-1">响应时间：30分钟 | 解决时间：2小时</p>
                                    </div>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="viewFeedbackDetail('FB005')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    查看详情
                                </button>
                                <button onclick="rateFeedback('FB005')" class="bg-green-50 text-green-600 text-xs px-3 py-2 rounded-lg hover:bg-green-100 transition-colors">
                                    评价
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Load More Button -->
                    <div class="text-center py-4">
                        <button onclick="loadMoreFeedbacks()" class="bg-gray-100 text-gray-600 text-sm px-6 py-2 rounded-lg hover:bg-gray-200 transition-colors">
                            <i class="fas fa-chevron-down mr-2"></i>加载更多
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="submitNewFeedback()" class="flex-1 bg-orange-600 text-white font-medium py-2.5 rounded-lg hover:bg-orange-700 transition-colors">
                    <i class="fas fa-plus mr-2"></i>新建反馈
                </button>
                <button onclick="exportFeedbacks()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-download"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        let currentFilter = 'all';

        // Filter by status
        function filterByStatus(status) {
            currentFilter = status;
            
            // Update tab styles
            document.querySelectorAll('.filter-tab').forEach(tab => {
                tab.classList.remove('active', 'bg-orange-600', 'text-white');
                tab.classList.add('bg-gray-200', 'text-gray-600');
            });
            
            event.currentTarget.classList.remove('bg-gray-200', 'text-gray-600');
            event.currentTarget.classList.add('active', 'bg-orange-600', 'text-white');
            
            // Filter feedback items
            document.querySelectorAll('.feedback-item').forEach(item => {
                if (status === 'all' || item.dataset.status === status) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
            
            showToast(`已筛选${getStatusName(status)}反馈`);
        }

        function getStatusName(status) {
            const names = {
                'all': '全部',
                'pending': '待处理',
                'processing': '处理中',
                'resolved': '已解决'
            };
            return names[status] || '全部';
        }

        // Filter feedbacks (advanced)
        function filterFeedbacks() {
            const options = [
                '按类型筛选',
                '按优先级筛选',
                '按时间筛选',
                '按评价筛选'
            ];
            
            const choice = prompt(`选择筛选方式：\n0 - ${options[0]}\n1 - ${options[1]}\n2 - ${options[2]}\n3 - ${options[3]}`);
            
            if (choice !== null && options[choice]) {
                showToast(`正在按${options[choice]}筛选...`);
            }
        }

        // View feedback detail
        function viewFeedbackDetail(feedbackId) {
            window.location.href = `b2b-feedback-detail.html?id=${feedbackId}`;
        }

        // Rate feedback
        function rateFeedback(feedbackId) {
            const rating = prompt('请为此次服务评分（1-5星）：', '5');
            if (rating && rating >= 1 && rating <= 5) {
                const comment = prompt('请添加评价内容（可选）：');
                showToast(`评价已提交：${rating}星`);
                setTimeout(() => {
                    showToast('感谢您的评价！');
                }, 1000);
            }
        }

        // Urge feedback
        function urgeFeedback(feedbackId) {
            if (confirm('确定要催办此反馈吗？\n\n系统会提醒相关团队尽快处理。')) {
                showToast('催办提醒已发送');
                setTimeout(() => {
                    showToast('相关团队会优先处理您的反馈');
                }, 1500);
            }
        }

        // Edit feedback
        function editFeedback(feedbackId) {
            window.location.href = `b2b-edit-feedback.html?id=${feedbackId}`;
        }

        // Delete feedback
        function deleteFeedback(feedbackId) {
            if (confirm('确定要删除此反馈吗？\n\n删除后无法恢复，但不会影响已有的处理进度。')) {
                showToast('反馈已删除');
                event.target.closest('.feedback-item').style.display = 'none';
            }
        }

        // Submit new feedback
        function submitNewFeedback() {
            window.location.href = 'b2b-feedback.html';
        }

        // Export feedbacks
        function exportFeedbacks() {
            if (confirm('确定要导出反馈记录吗？\n\n将导出当前筛选条件下的所有反馈记录。')) {
                showToast('正在生成导出文件...');
                setTimeout(() => {
                    showToast('反馈记录导出完成！');
                }, 2000);
            }
        }

        // Load more feedbacks
        function loadMoreFeedbacks() {
            showToast('正在加载更多反馈...');
            setTimeout(() => {
                showToast('没有更多反馈了');
            }, 1000);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('我的反馈页面已加载');
        });
    </script>
</body>
</html>